<template>
	<div class="chatframe-List">
		<!-- 将数据渲染到标签页中 -->
		<!-- 每个消息单元，包括发送者id，头像，和气泡 -->
		<div class="messageUnit" v-for="(unit, index) in pcChatData.getChatMessages(item.name)" :key="index">
			<!-- 信息还需要进行类型上的甄别，是谁发送的数据，是其他用户发送的还是我们自己发送的 -->
			<!-- 通过对比id，来检查值的来源 -->
			<template v-if="unit.sendID == userData.user._id">
				<RightType :userData="userData" :unit="unit"></RightType>
			</template>
			<!-- 如果不是本机发送的 -->
			<template v-else>
				<!-- 接收方组件 -->
				<LeftUnit :message="item.friendMessage" :unit="unit" @showMessageEvent="showMessage"></LeftUnit>
			</template>
		</div>
		<!-- 用一个空白的样式，撑大聊天列表 -->
		<div class="blockshow"></div>
	</div>
	<div class="chatframe-Input">
		<SendUnit :inputValue ="sendText" @handleSendMessage="sendMessageEvent" />
	</div>
</template>

<script setup>
import {
	defineProps,
	defineEmits,
	reactive
} from 'vue';

import LeftUnit from "./LeftUnit.vue"
import RightType from "./RightUnit.vue"
import SendUnit from "./SendUnit.vue"

import useUser from "@/store/user.js"
import useView from "@/store/view.js"
import usepcChat from "@/store/pcChat.js"


let userData = useUser();
let viewData = useView();
let pcChatData = usepcChat();

// 通过props进行传值
// 一次会获取所有的props传的值,所以需要使用数组获取
let props = defineProps(["Unit"]);
// 这个值在组件中并不会被修改,所以没有必要使用响应式
let item = reactive(props.Unit);

// 接收事件
let emits = defineEmits(["sendMessageEvent"])

// 通过事件发送值到父组件上
let sendMessageEvent = (sendText) => {
	emits("sendMessageEvent", item.name, sendText)
}


// 点击头像时，显示的好友的相关信息
let showMessage = () => {
	const {
		friendMessage: {
			friendId,
			username,
			remark,
			addTime,
			message: {
				nickname,
				avatarPath,
				bio
			}
		}
	} = item;

	let showFriend = {};
	showFriend.friendId = friendId;
	showFriend.nickname = nickname;
	showFriend.username = username;
	showFriend.avatarPath = avatarPath;
	showFriend.bio = bio;
	showFriend.remark = remark;
	showFriend.addTime = addTime;
	viewData.updateshowData(true, showFriend);
}
</script>

<style>
/* 设置信息列表的样式 */
.chatframe-List {
	grid-area: 1 / 1 / 22 / 31;
	overflow: scroll;
}


.chatframe-Input {
	grid-area: 22 / 1 / 31 / 31;
}

.chatframe-Input>button {
	position: absolute;
	bottom: 50px;
	right: 30px;
}

/* 单元信息的样式 */
/* 左右布局都使用这个网格布局 */
.messageUnit {
	display: grid;
	grid-template-columns: repeat(15, 1fr);
	grid-template-rows: repeat(15, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;

	width: 100%;
}

/* 专门用来撑大聊天框体的 */
.blockshow {
	height: 60%;
}

/* 输入框样式 */
.el-textarea__inner {
	height: 100%;
}
</style>